<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<!-- pageEncoding="UTF-8"%> -->
<%@ taglib uri="/struts-tags" prefix="s"%>
<%@ page
	import="edu.uit.se.laps.web.*,edu.uit.se.laps.web.controller.*, java.net.*,java.text.*,java.util.*"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
	body{
		
	}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Đăng nhập</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<script language="javascript" src="1.7.2.jquery.min.js"></script>
	<script type="text/javascript">
	$(document).ready(function(){
		var $center_w = $(window).width()/2;
		var $center_h = $(window).height()/2;
		var $width_admin = $(window).width()/2.5;
		var $height_admin = $(window).height()/2;
		var $left = $center_w - $width_admin/2;
		var $top = $center_h - $height_admin/2;
		
		$('.admin').css({'width': $width_admin + 'px', 'height': $height_admin + 'px',
			'border':'1px solid black','position':'relative',
			'left':$left + 'px', 'top':$top + 'px', 'background':'white'});
		
		var center_img_left = $('.icon').width()/2;
		var	center_img_top = $('.icon').height()/2;
		
		var left = center_img_left - center_img_left/2;
		var top = center_img_top - center_img_top/2;
		
		$('.icon IMG').css({'margin':'15px 0px', 'height':'50%'});
		$('.in_out').css({'width':'80%'});
		$('.icon').css({'height':'20%','margin-bottom':'25px', 'background':'#6699FF'});
		$('.dangnhap').css({'width':'100%', 'height':'35px', 'margin':'10px 0px'});
		$('.dangnhap .icon2').css({'width':'10%', 'height':'34px','float':'left', 
			'background-image':'url("sources/icon/people.png")'});
		$('.dangnhap .key').css({'width':'10%', 'height':'34px','float':'left', 
			'background-image':'url("sources/icon/key.png")'});
		$('.dangnhap img').css({'height':'34px','width':'100%'});
		$('.dangnhap .login1').css({'height':'80%', 'width':'88%'});
		$('.dangnhap .login2').css({'height':'80%', 'width':'88%'});
		$('.quennho').css({'width':'100%','height':'35px', 'margin':'20px 0px'});
		$('.quennho .nhoMK').css({'float':'left', 'margin':'10px 0px'});
		$('.quennho .quenMK').css({'float':'right', 'margin':'10px 0px', 'text-decoration':'none'});
		$('.bt_dangnhap').css({'width':'100%','height':'35px', 'line-height':'35px',
			'margin':'20px 0px', 'background':'#2952CC', 'color':'white', 'font-size':'20px', 'cursor':'pointer'});
		$(function() {
	  			$.fn.hoverTab=function(){
		  			$(this).hover(function(){
			  			$(this).css({'background': '#6699FF'});
			  		}, function(){
			  			$(this).css({'background': '#2952CC'});
			  		});
		  		};
	  		});
		$(function() {
	  			$(".bt_dangnhap").hoverTab();
	  		});	
		
	});
	</script>
</head>
<body background="../sources/icon/background.jpg">

	<%
		TaiKhoanSession tkSession = (TaiKhoanSession) session
				.getAttribute("TaiKhoanSession");
		if (tkSession == null) {
			tkSession = new TaiKhoanSession();
			session.setAttribute("TaiKhoanSession", tkSession);
		}
	%>


	<div class="admin" align="center">
		<div class="icon" align="center"><img src="../sources/icon/label1.png"/></div>
		<div class="in_out" align="center">
			<h1>Đăng nhập</h1>
			<div style="color: red">${message}</div>
			<s:form action="loginAdmin">
				<s:textfield name="taiKhoan.email" label="Email" />
				<s:password name="taiKhoan.password" label="Password" />
				<s:submit value="Đăng nhập" />
			</s:form>
		</div>
		
		
		<div></div>
	</div>
</body>
</html>